<!-- <template>
  <div id="cesiumContainer"></div>
</template> -->
<template>
  <div id="customContainer">
    <div id="buttonContainer">
      <button id="downViewButton">俯视视图</button>
      <button id="trackViewButton">实体视图</button>
      <button id="sideViewButton">侧面视图</button>
    </div>
    <div id="selectContainer">
      <select id="select">
        <option value="LinearApproximation">线性近似插值路径</option>
        <option value="HermitePolynomialApproximation">Hermite 多项式近似插值</option>
        <option value="LagrangePolynomialApproximation">拉格朗日多项式近似插值路径</option>
      </select>
    </div>
  </div>
  <div id="cesiumContainer" style="width: 100%"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';

onMounted(() => {
   Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZmJjNWE1MS1iNTQyLTRhMTYtODAyMS05Y2M3NmRkYzA2YjAiLCJpZCI6MzE3NjQ5LCJpYXQiOjE3NTE0MjU0MTl9.-YkjvNog5MTxns8gGCBe3ybvx5ixknkzu_Cczfv4VV8';
 
  const viewer = new Cesium.Viewer('cesiumContainer',{
    infoBox:false,    
  })

  const startTime = Cesium.JulianDate.fromDate(new Date('2019-01-01T00:00:00.00Z'));
  const stopTime = Cesium.JulianDate.addSeconds(startTime, 3600*24*2, new Cesium.JulianDate());
  viewer.clock.startTime = startTime.clone();
  viewer.clock.stopTime = stopTime.clone();
  viewer.clock.multiplier = 20; //将时间流逝速度设为正常的 20 倍
   
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  //将视图设置为提供的时间
  viewer.timeline.zoomTo(startTime, stopTime);
// 创建盒子
var blueBox = viewer.entities.add({
    name : 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.BLUE,
        outline: true,
    }
});
//用来通过给定多个不同时间点的Sample，然后在每两个时间点之间进行线性插值的一种Property
    // var property = new Cesium.SampledProperty(Cesium.Cartesian3);

    // property.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
    //     new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
    
    // property.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 
    //     new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));

    // blueBox.box.dimensions = property;
//TimeIntervalCollectionProperty该Property用来指定各个具体的时间段的属性值，每个时间段内的属性值是恒定的，并不会发生变化，除非已经进入到下一个时间段。拿创建的盒子示例来说，表现出来的特点就是盒子尺寸的变化时跳跃式的。效果如下：
//      var property = new Cesium.TimeIntervalCollectionProperty(Cesium.Cartesian3);

//     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
//         iso8601 : '2019-01-01T00:00:00.00Z/2019-01-01T12:00:00.00Z',
//         isStartIncluded : true,
//         isStopIncluded : false,
//         data : new Cesium.Cartesian3(400000.0, 300000.0, 200000.0)
//     }));
//     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
//         iso8601 : '2019-01-01T12:00:01.00Z/2019-01-02T00:00:00.00Z',
//         isStartIncluded : true,
//         isStopIncluded : false,
//         data : new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
//     }));
//     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
//         iso8601 : '2019-01-02T00:00:01.00Z/2019-01-02T12:00:00.00Z',
//         isStartIncluded : true,
//         isStopIncluded : false,
//         data : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
//     }));
//     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
//         iso8601 : '2019-01-02T12:00:01.00Z/2019-01-03T00:00:00.00Z',
//         isStartIncluded : true,
//         isStopIncluded : true,
//         data : new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
//     }));

//     blueBox.box.dimensions = property;
// //ConstantProperty，其实这才是最常用的Property
// blueBox.box.dimensions = new Cesium.Cartesian3(400000.0, 300000.0, 200000.0);
// 以上代码貌似没有使用ConstantProperty，实际上他是等同于：
// blueBox.box.dimensions = new ConstantProperty(new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
// 也就是Entity的box.dimensions类型并不是Cartesian3，而是一个Property。虽然我们赋值了一个Cartesian3，但是Cesium内部会隐晦地转化成了一个ConstantProperty。注意只会隐晦地转化成ConstantProperty，而不是SampleProperty，更不是TimeIntervalCollectionProperty。

// 虽然叫ConstantProperty，但是，这里Constant的意思并不是说这个Property不可改变，而是说它不会随时间发生变化。
// 举个例子，我们可以通过 property.getValue(viewer.clock.currentTime) 方法来获取某个时间点property的属性值。如果property是SampleProperty或者TimeIntervalCollectionProperty的话，不同的时间点，可能getValue出不同的数值。但是如果这个property是ConstantProperty，那么无论什么时间（getValue的第一个参数不起作用），最后返回的数值都是一样的。

// 但是不会随时间变化，并不代表不可改变。ConstantProperty还有一个setValue的方法，开发者可以通过调用它，来在适当的时候改变property的值。

// 比如，我可以通过点击按钮来修改ConstantProperty，代码如下：
// blueBox.box.dimensions.setValue(new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));
// 需要注意的是，虽然最终效果一样，但是以下两种写法的意义是不一样的。

// blueBox.box.dimensions = new Cesium.Cartesian3(400000.0, 300000.0, 200000.0);

// blueBox.box.dimensions.setValue(new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));

// 前者会创建一个新的ConstantProperty，后者则会修改原有的ConstantProperty的值。


// CompositeProperty的意思是组合的Property，可以把多种不同类型的ConstantProperty、SampleProperty、TimeIntervalCollectionProperty等Property组合在一起来操作。比如前一个时间段需要线性运动，后一段时间再跳跃式运动。则可以使用类似下面这段代码来实现。

  //  // 1 sampledProperty
  //   var sampledProperty = new Cesium.SampledProperty(Cesium.Cartesian3);
  //   sampledProperty.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
  //       new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
    
  //   sampledProperty.addSample(Cesium.JulianDate.fromIso8601('2019-01-02T00:00:00.00Z'), 
  //       new Cesium.Cartesian3(400000.0, 300000.0, 400000.0));

  //   // 2 ticProperty
  //   var ticProperty = new Cesium.TimeIntervalCollectionProperty();
  //   ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
  //       iso8601 : '2019-01-02T00:00:00.00Z/2019-01-02T06:00:00.00Z',
  //       isStartIncluded : true,
  //       isStopIncluded : false,
  //       data : new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
  //   }));
  //   ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
  //       iso8601 : '2019-01-02T06:00:00.00Z/2019-01-02T12:00:00.00Z',
  //       isStartIncluded : true,
  //       isStopIncluded : false,
  //       data : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
  //   }));
  //   ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
  //       iso8601 : '2019-01-02T12:00:00.00Z/2019-01-02T18:00:00.00Z',
  //       isStartIncluded : true,
  //       isStopIncluded : false,
  //       data : new Cesium.Cartesian3(400000.0, 300000.0, 600000.0)
  //   }));
  //   ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
  //       iso8601 : '2019-01-02T18:00:00.00Z/2019-01-03T23:00:00.00Z',
  //       isStartIncluded : true,
  //       isStopIncluded : true,
  //       data : new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
  //   }));

  //   // 3 compositeProperty
  //   var compositeProperty = new Cesium.CompositeProperty();
  //   compositeProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
  //       iso8601 : '2019-01-01T00:00:00.00Z/2019-01-02T00:00:00.00Z',
  //       data : sampledProperty
  //   }));
  //   compositeProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
  //       iso8601 : '2019-01-02T00:00:00.00Z/2019-01-03T00:00:00.00Z',
  //       isStartIncluded : false,
  //       isStopIncluded : false,
  //       data : ticProperty
  //   }));

  //   // 4 设置position
  //   blueBox.box.dimensions = compositeProperty;

//和普通的Property相比，只是多了一个Position，所以用法上也大同小异，只不过他们是用来专门表示位置的
     var property = new Cesium.SampledPositionProperty();

    property.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
        Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0));
    
    property.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 
        Cesium.Cartesian3.fromDegrees(-114.0, 45.0, 300000.0));

    blueBox.position = property;

})

</script>